.plane-device {
  --e-color: #606266;
  color: var(--e-text-color);
  font-size: 12px;

  &.is-locked {
    z-index: 0;
    position: relative;
    pointer-events: none;
  }

  &__content {
    .device-item {
      cursor: pointer;
      transform: translate(-50%, -50%);
      position: absolute;
      img {
        display: block;
        position: relative;
        max-width: none;
        max-height: none;
        user-select: none;
        -webkit-user-drag: none;
        &.no-rem {
          width: 96px;
          height: 96px;
        }
      }
      &.is-active {
        color: #f00;
        &::after {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 1px solid rgba($color: #f00, $alpha: 0.3);
          content: '';
          position: absolute;
          pointer-events: none;
        }
      }
      &.FM img,
      &.LDFM img,
      &.LQFM img {
        width: 32px;
        height: 32px;
      }
      &.DOT {
        .device-item__wrap {
          width: 20px;
          height: 20px;
          border: 2px solid #5097ff;
          display: flex;
          position: relative;
          align-items: center;
          border-radius: 50%;
          justify-content: center;
          background-color: #98c1ff;
          .device-item--mark {
            color: #3a84f5;
            font-size: 12px;
          }
          .device-item--text {
            top: 22px;
            left: 50%;
            position: absolute;
            transform: translateX(-50%);
            &.is-CHWP {
              top: -30px;
            }
          }
        }
      }

      &--name {
        left: 50%;
        opacity: 0.5;
        position: absolute;
        transform: translateX(-50%);
        white-space: nowrap;
        pointer-events: none;
      }
    }
  }
}
